class Label extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [

            ],
            name: '',
            id: '0',
            ishide: 'none',
            keyword: "",
            start: 0,
            pagesize: 12
        };
    }


    formatlist(list) {
        let listitem = [],wulist=[];
        if(list.length>0){
            list.forEach((x, i) => {
                console.log(x, i)
                listitem.push(
                    <tr key={i}>
                        <td>{x.name}</td>
                        <td className="operatebox">
                            <div className='operate' id={"ope" + x.id}>
                                <div>
                                    <img src={`./src/comment.png`} />
                                    <p className='edit' onClick={this.tosubcategory.bind(this, x.id)}>查看分类</p>
                                </div>
                                <div>
                                    <img src="./src/del.png" />
                                    <p className='edit colred' onClick={this.del.bind(this, x.id)}>删除</p>
                                </div>
    
    
                            </div>
                        </td>
                    </tr>
                )
            });
        } else {
            wulist.push(
                <p className="wulist">暂无数据</p>
            )
        }
        this.setState({listitem,list,originallist:list,wulist})

    }

    componentDidMount() {
        this.freshlist();
    }

    freshlist() {
        // console.log(start);
        getlabellist( res => {
            console.log(res)
            if (res.issuccess == 1) {
                this.formatlist(res.list);
                // this.setState({
                //     listitem,
                //     list: res.list
                // })
            }

        })

    }

    add() {
        this.setState({ clicknew: !0, id: '0' })
    }
    tosubcategory(id) {
        // localStorage.setItem('label', name);
        window.location.href = "./labels.html?id="+id;

    }
    // toorder(id) {
    //     let { ishide } = this.state;
    //     $('#ishide' + id).toggle();
    //     console.log(ishide, 'hide');
    //     this.setState({ ishide });
    //     $("#" + id).val('');
    // }
    // setcategoryorder(id) {
    //     let order = $("#" + id).val(), data;

    //     if (isNaN(order) || order < 1 || order > 999) {
    //         alert('请输入1-999的正整数');
    //         return;
    //     }
    //     order = Math.floor(order);
    //     data = { id, order };
    //     setorder(data, res => {
    //         if (res.issuccess == 1) {
    //             console.log("设置成功");
    //         }
    //     });
    //     this.freshlist();
    // }
    inputschange(e) {
        // console.log(e.target.value)
        // var txt = e.target.value;
        this.setState({
            keyword: e.target.value
        })
    }
    cha() {
        let {keyword}=this.state
        if(keyword=='')return;
        let {list}=this.state
        this.setlist(list);
        // var { keyword, pagesize, start } = this.state;
        // console.log(pagesize)
        // var data = [keyword, pagesize, start]
        // chalable(keyword, pagesize, start, res => {
        //     if (res.list) {
        //         this.setlist(res.list);
        //         // this.setState({showswitch:!1})
        //     }
        // })
    }



    setlist(list) {
        var { keyword } = this.state;
        console.log(keyword)
        var listitem = [];
        console.log(list, list.length)
        if (list.length > 0) {
            list.forEach((x, i) => {
                // console.log(x.name, i)
                if (x.name == keyword) {
                    console.log("123")
                    listitem.push(

                        <tr key={i}>
                            <td>{x.name}</td>
                            <td className="operatebox">
                                <div className='operate' id={"ope" + x.id}>
                                    <div>
                                        <img src={`./src/comment.png`} />
                                        <p className='edit' onClick={this.tosubcategory.bind(this, x.id)}>查看分类</p>
                                    </div>
                                    <div>
                                        <img src="./src/del.png" />
                                        <p className='edit colred' onClick={this.del.bind(this, x.id)}>删除</p>
                                    </div>


                                </div>
                            </td>
                        </tr>

                        // <tr key={i}>
                        //     <td>{x.name}</td>
                        //     <td className='operate'>
                        //         <p className='edit' onClick={this.tosubcategory.bind(this, x.id, x.name)}>查看分类</p>
                        //         <p onClick={this.del.bind(this, x.id)}>删除</p>
                        //     </td>
                        // </tr>
                    )
                }
                this.setState({ list, listitem })

            }
            )
        }
    }


    inputchange(e) {

        this.setState({ name: e.target.value })
    }
    // inputcode(e) {
    //     this.setState({ code: e.target.value })
    // }
    // clickupload() {
    //     $('#file').click();
    // }
    // del_detail_img() {
    //     this.setState({ finishupload: !1, thumburl: '' })
    // }
    // filechange(e) {
    //     var that = this;
    //     this.setState({
    //         finishupload: !1,
    //         uploadword: "上传"
    //     })
    //     var that = this;
    //     var filecode = this.state.filecode;
    //     console.log(filecode, 'filecode');
    //     var filedata = $('#file')[0].files[0];

    //     var reader = new FileReader();
    //     reader.readAsDataURL(filedata);
    //     reader.onload = function (e) {
    //         var thumburl = e.target.result;
    //         that.setState({ thumburl })

    //     }
    // }
    reset() {

        this.setState({ keyword: '' });
        this.freshlist();
    }

    submit() {
        var { name } = this.state, err = '';
        console.log(name, 'name');


        if (name== '') err = '请填写分类名称';
        if (err.length > 0) {
            alert(err);
            return;
        }
        var data = { name };
        if (Number(this.state.id) > 0) {
            data['id'] = this.state.id;
        }
        addlabel(data, res => {
            if (res.issuccess == 1) {
                // var text = Number(this.state.id) > 0 ? '修改成功' : '添加成功'
                alert('添加成功')
                this.setState({ name: '' })
                this.freshlist();
            }
        })
    }
    // edit(e) {
    //     console.log(e);
    //     var list = this.state.list;
    //     console.log(list)
    //     var item = {};
    //     list.forEach(x => {
    //         if (x.id == e) {
    //             // console.log('code',x.categoryid);

    //             this.setState({
    //                 name: x.name,
    //                 id: x.id

    //             })
    //         }
    //     });
    // }
    del(e) {
        this.setState({ delid: e })
        $('#myModal').modal('toggle');
    }
    confirmdel() {
        let { delid } = this.state
        dellabel( delid, res => {
            if (res.issuccess == 1) {
                alert('删除成功')
                $('#myModal').modal('toggle');
                this.freshlist()
            } else {
                $('#myModal').modal('toggle');
                alert(res.msg);
            }
        })
    }


    render() {
        var { listitem, keyword,wulist } = this.state;
        return (
            <div className="breadLinebox">
                <Modal content='确定删除吗？' click={this.confirmdel.bind(this)} />

                <div className="modal fade" id="modalOne" >
                        <div className="modal-dialog">
                            <div className="modal-content">

                            <div className="modal-header border">
                                <p className="modal-title">新建</p>
                                <img data-dismiss="modal" src="./src/close.png"/>
                                        </div>
                            <div className="modal-body">
                            <div className="input-group">
                               
                                    <span className="">标签名称</span>
                                    <input id='name' onChange={this.inputchange.bind(this)} value={this.state.name} type="text" placeholder='请输入标签名称' className="input" />
                                </div>
                               
                
                            </div>
                            <div className="modal-footer border">
                                <button type="button" className="closemod" data-dismiss="modal">关闭</button>
                                <button type="button" onClick={this.submit.bind(this)} data-dismiss="modal"  className="submitmod">提交</button>
                            </div>

                            </div>
                            </div>
                        </div>

                <div className='content_wrap panel-default content_wrap'>
                    <div className='breadLine '>
                        当前位置 > 一级分类标签
                            </div>
                    <div className="content">
                        <div className="tabletit" >
                            <p className="add" data-toggle="modal" data-target="#modalOne" onClick={this.add.bind(this)}>新建</p>
                           
                        </div>
                        <div className="tabletitbox">
                            <div className="tabletit">
                                <div className="search">
                                    <input onChange={this.inputschange.bind(this)} value={keyword} type="text" placeholder='请输入分类名称' />
                                    <p onClick={this.cha.bind(this)}>查询</p>
                                    <p onClick={this.reset.bind(this)}>返回</p>
                                </div>
                            </div>
                        </div>


                        <table className="tab">
                            <thead>
                                <tr>

                                    <th>标签名称</th>
                                    <th className="cz tconter">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {listitem}
                            </tbody>
                        </table>
                        {wulist}
                    </div>
                </div>






            </div>




            // <div className='content_wrap panel-default content_wrap'>
            //     <Modal content='确定删除吗？' click={this.confirmdel.bind(this)} />
            //     <div className='breadLine '>
            //         当前位置 > 一级分类标签
            //             </div>
            //     <div className='inputs panel-body'>
            //         <h3>一级标签管理</h3>
            //         <button onClick={this.add.bind(this)} className='btn add btn-primary center' >新建分类</button>
            //         <div style={{ display: this.state.clicknew ? "" : "none" }}>
            //             <div className="input-group input-group">
            //                 <span className="input-group-addon ">标签名称</span>
            //                 <input id='name' onChange={this.inputchange.bind(this)} type="text" value={this.state.name} placeholder='请输入标签名称' className="form-control " />
            //             </div>


            //             <button onClick={this.submit.bind(this)} className='btn submit btn-primary center ' >确定添加</button>
            //         </div>
            //         <div className='btns'>
            //             <input type="text" onChange={this.inputschange.bind(this)} />
            //             <button onClick={this.cha.bind(this)}>查询</button>
            //         </div>
            //         <table className="table table-hover">
            //             <thead>


            //                 <tr>
            //                     <th>标签名称</th>

            //                     <th>操作</th>
            //                 </tr>
            //             </thead>
            //             <tbody>
            //                 {/* {listhtml} */}
            //                 {listitem}
            //             </tbody>
            //         </table>

            //     </div>
            // </div>
        )
    }
}





ReactDOM.render(
    <div>
        <TopLine />
        {/* <LeftMenu code='8'/> */}
        <LeftMenu code='label' />
        <Label />
    </div>
    //<Barrage/>
    , $('.container')[0]
)